<meta charset="utf-8">
<link rel="stylesheet" href="css/main_menu.css"/>
<?php
/**
 * Created by PhpStorm.
 * User: Aliaksei Lazerka
 * Date: 10/12/14
 * Time: 9:51 PM
 */
?>


<div class="menuDiv">
  <div class="menuLogo">
    LOGO
  </div>
  <div class="menuItem" id="newsMain">
    <?= getMessageByKey("menu.main.news") ?>
  </div>
  <div class="menuItem menuItemSelected" id="docsMain">
    <?= getMessageByKey("menu.main.docs") ?>
  </div>
  <div class="menuItem">
    <?= getMessageByKey("menu.main.download") ?>
  </div>
  <div class="menuItem">
    <?= getMessageByKey("menu.main.about") ?>
  </div>
  <div class="menuItem">
    <?= getMessageByKey("menu.main.account") ?>
  </div>

</div>
<div class="subMenu" id="newsSub">
  <div class="subMenuBlock">
    <div class="subMenuHeader">
      News
    </div>
    <div class="subMenuItem">
      Recent news
    </div>
    <div class="subMenuItem">
      Archive
    </div>
  </div>
</div>
<div class="subMenu" id="docsSub">
  <div class="subMenuBlock">
    <div class="subMenuHeader">
      Documentation
    </div>
    <div class="subMenuItem">
      Versions
    </div>
    <div class="subMenuItem">
      Old versions
    </div>
  </div>
</div>

<script>

  function a(id1, id2) {
    var mainOut = false;
    var subOut = false;
    var subIn = false;

    $("#" + id1).mouseleave(function () {
      mainOut = true;
      if (subOut) {
        $("#" + id2).fadeOut('fast');
        mainOut = false;
        subOut = false;
        subIn = false;
      }
    });

    $("#" + id2).mouseleave(function () {
      subOut = true;
      if (mainOut) {
        $("#" + id2).fadeOut('fast');
        mainOut = false;
        subOut = false;
        subIn = false;
      }
    });

//    $("#" + id2 + ", #" + id1).mouseleave(function () {
//      if ((!subIn && mainOut) || (subOut && mainOut)) {
//        $("#" + id2).fadeOut('fast');
//        mainOut = false;
//        subOut = false;
//        subIn = false;
//      }
//    });

    $("#" + id1).mouseenter(function () {
      if (!subIn) {
        $("#" + id2).fadeIn('fast');
      }
    });

    $("#" + id2).mouseenter(function () {
      subIn = true;
    });

  }

  window.onload = function () {
    a('newsMain', 'newsSub');
    a('docsMain', 'docsSub')
  };

</script>
